<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>{{roomID}}</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 10vw;
    }

    body {
      font-size: 14px;
      overflow: hidden;
    }
    #msglog,
    #messageInput {
      width: 10rem;
      height: calc(100vh - 230px);
      overflow-y: auto;
      font-size: 14px;
    }

    #messageInput {
      height: 120px;
    }

    .message {
      line-height: 22px;
      display: flex;
      justify-content: flex-start;
      margin: .2rem;
    }

    .message>.user-head {
      width: 1rem;
      height: 1rem;
      border: .05rem solid rgba(255, 255, 255, .5);
      position: relative;
      border-radius: 50%;
      flex-shrink: 0;
      background: url() center no-repeat;
      background-size: cover;
      box-shadow:  0 0 0.2rem rgba(0, 0, 0, .5);
    }

    .message>.user-head>span {
      position: absolute;
      color: #fff;
      line-height: 1rem;
      top: 0;
      left: 0;
      font-size: .8rem;
      width: 100%;
      text-align: center;
    }

    .message .msg-box sup {
      width: calc(100% - .6rem);
      display: block;
      color: #555;
      margin: 0 .3rem;
    }

    .message .msg-box .msg {
      margin: 0 .3rem;
      background-color: rgb(0, 204, 34);
      color: #fff;
      padding: .3rem;
      border-radius: .5rem;
      border-top-left-radius: 0;
      position: relative;
    }

    .message-me .msg-box sup {
      text-align: right;
    }

    .message-me .msg-box .msg {
      background-color: rgb(0, 183, 255);
      border-top-left-radius: .5rem;
      border-top-right-radius: 0;
    }

    .message-me {
      justify-content: flex-end;

    }

    .message .user {
      padding-right: 5px;
      padding-left: 5px;
    }

    .sysMsg {
      color: #c1bfbf;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 12px;
      text-align: center;
    }

    #users {
      width: 490px;
      padding: 0 5px 5px;
    }
  </style>
</head>

<body>
  <!-- 昵称:
  <span id="userName">{{user}}</span>
  <br/> 当前在线人数:
  <span id="count">{{roomID.length}}</span>
  <br/> 在线用户:
  <div id="users">{{users}}</div> -->

  <div id="msglog">

  </div>
  <textarea name="message" id="messageInput" class="kedit" placeholder="按Enter发送"></textarea>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/jquery.js"></script>
  <script src="/kindeditor/kindeditor-all.js"></script>
  <script src="/kindeditor/lang/zh-CN.js"></script>
  <script>
    var socket = io();

    $(function () {
      // ----------设置昵称-------------
      var user = "{{user}}";
      console.log(user)

      $.get('/name2info/' + user, (data) => {
        console.dir(data)
        var userInfo = data.data;
        $('#userName').html(userInfo.nickName)
        var userName = user;


        // ---------创建连接-----------

        // 加入房间
        socket.on('connect', function () {
          socket.emit('join', user);
        });

        // 监听消息
        socket.on('msg', function (_userName, msg) {
          $.get('/name2info/' + _userName, (data) => {
            var userInfo = data.data;
            if (userInfo.headImg === "") {
              var userhead = `
              <div class="user-head" style="background-color:${userInfo.headColor}"><span>${String(userInfo.nickName).slice(0, 1).toUpperCase()}</span></div>
              `
            } else {
              var userhead = `
              <div class="user-head" style="background-image:url('${userInfo.headImg}')"></div>
              `
            }

            if (_userName != userName) {
              var message = `
                <div class="message">
                  ${userhead}
                  <div class="msg-box">
                    <sup>${userInfo.nickName}</sup>
                    <div class="msg">${msg}</div>
                  </div>
                </div>`;
            } else {
              var message = `
                <div class="message message-me">
                  <div class="msg-box">
                    <sup>${userInfo.nickName}</sup>
                    <div class="msg">${msg}</div>
                  </div>          
                  ${userhead}
                </div>`;
            }

            $('#msglog').append(message);
            // 滚动条保持最下方
            $('#msglog').scrollTop($('#msglog')[0].scrollHeight);
          })


        });

        // 监听系统消息
        socket.on('sys', function (sysMsg, users) {
          var message = '<div class="sysMsg">' + sysMsg + '</div>';
          $('#msglog').append(message);

          $('#count').text(users.length);
          $('#users').text(users);
        });

        // 发送消息
        $('#messageInput').keydown(function (e) {
          if (e.which === 13) {
            e.preventDefault();
            var msg = $(this).val();
            $(this).val('');
            socket.send(msg);
          }
        });

        // 退出房间
        $('#joinOrLeave').click(function () {
          if ($(this).text() === '退出房间') {
            $(this).text('进入房间');
            socket.emit('leave');
            var msg = '你已经退出了房间,重新发言请点击"进入房间"';
            $('#msglog').append('<div class="sysMsg">' + msg + '</div>');
          } else {
            $(this).text('退出房间');
            socket.emit('join', userName);
          }

        });
      })
    });
    var editor;
    KindEditor.ready(function (K) {
      var options = {
        uploadJson: 'http://localhost:3000/uploadImg',
        resizeType: 0,
        height: '240px',
        width: '100%',
        border: 'none',
        allowPreviewEmoticons: false,
        items: [
          'emoticons', 'fontsize'
        ],
        afterBlur: function () { this.sync(); },
        newlineTag: "br",
        afterCreate: function () {
          var self = this;
          var $txt = $("iframe").contents().find("body");
          $txt.keyup(function (event) {
            if (event.keyCode == 13 && !event.ctrlKey) {
              event.preventDefault()
              self.sync();
              var msg = $('#messageInput').val().trim()
              // editor.remove();
              // editor=null;
              // editor = K.create('.kedit',options);
              editor.html('')
              editor.focus()
              console.log(editor.edit.doc)
              $txt = $(editor.edit.doc).find("body");
              socket.send(msg);
            }
          });
          K.ctrl($txt[0], 13, function (e) {
            console.log('aaaaaaaaaaaaaaaaaaa')
            K.insertHtml('textarea[name="message"]', '<br/>');
          })
        }
      }
      editor = K.create('.kedit', options);
    });
  </script>
</body>

</html>